<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<!--/* 加载IE8兼容性片段 */-->
<head>
    <title>问题工单详情</title>
    <!--/* 加载全局样式 */-->
    <th:block th:replace="common/thinDecorator::globalStyle"></th:block>
    <!--/* 加载全局主题样式 */-->
    <th:block th:replace="common/thinDecorator::globalThemeStyle"></th:block>
    <!--/* 加载全局布局样式 */-->
    <th:block th:replace="common/thinDecorator::globalLayoutStyle"></th:block>
    <style>

    </style>
</head>

<body class="page-content-white page-container-bg-solid" style="overflow-x: hidden;">
<div class="page-wrapper">
    <div class="page-container">
        <div class="page-content-wrapper">
            <div class="page-content">
                <div class="row">
                    <div class="col-md-12">
                        <div class="portlet light bordered">
                            <div class="portlet-title">
                                <div class="caption">
                                    <span class="content-title-text">去处理</span>
                                </div>
                                <div class="tools">
                                    <a href="javascript:;" class="collapse"></a>
                                </div>
                                <div class="actions">
                                </div>
                            </div>
                            <div class="portlet-body content-body">
                                <form class="horizontal-form" id="form" th:object="${orderDetail}" method="post">
                                    <input type="hidden" id="id" name="id" th:value="*{id}">
                                    <div class="m-grid m-first-row">
                                        <div class="m-grid-row">
                                            <div class="m-first-col m-grid-col m-grid-col-middle m-grid-col-right m-grid-col-md-2">
                                                <div class="form-label-wrapper">
                                                    <span class="form-label">数据质量名称</span>
                                                </div>
                                            </div>
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-center m-grid-col-md-4">
                                                <input id="projectName"
                                                       th:value="*{projectName}"
                                                       class="easyui-textbox"
                                                       data-options="required:false,tipPosition:'bottom',validType:'length[0,64]' "
                                                       readonly
                                                       style="width:80%">
                                            </div>
                                            <div class=" m-grid-col m-grid-col-middle m-grid-col-right m-grid-col-md-2">
                                                <div class="form-label-wrapper">
                                                    <span class="form-label">数据源</span>
                                                </div>
                                            </div>
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-center m-grid-col-md-4">
                                                <input id="dataSourceEngine"
                                                       th:value="*{dataSourceEngine}"
                                                       class="easyui-textbox"
                                                       data-options="required:false,tipPosition:'bottom',validType:'length[0,64]' "
                                                       readonly
                                                       style="width:80%">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="m-grid ">
                                        <div class="m-grid-row">
                                            <div class="m-first-col m-grid-col m-grid-col-middle m-grid-col-right m-grid-col-md-2">
                                                <div class="form-label-wrapper">
                                                    <span class="form-label">执行开始时间</span>
                                                </div>
                                            </div>
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-center m-grid-col-md-4">
                                                <input id="beginTime"
                                                       th:value="*{beginTime}"
                                                       class="easyui-textbox"
                                                       data-options="required:false, tipPosition:'bottom', validType:'length[0,64]'"
                                                       readonly
                                                       style="width:80%">
                                            </div>
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-right m-grid-col-md-2">
                                                <div class="form-label-wrapper">
                                                    <span class="form-label">执行结束时间</span>
                                                </div>
                                            </div>
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-center m-grid-col-md-4">
                                                <input id="endTime"
                                                       th:value="*{endTime}"
                                                       class="easyui-textbox"
                                                       data-options="required:false,valueField:'code',textField:'name',editable:false, data: [{code: 0, name: '未处理'}, {code: 1, name: '处理中'}, {code: 2, name: '已处理'}, {code: 3, name: '已关闭'}, {code: -1, name: '被打回'}], tipPosition:'bottom'"
                                                       readonly
                                                       style="width:80%">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="m-grid ">
                                        <div class="m-grid-row">
                                            <div class=" m-grid-col m-grid-col-middle m-grid-col-right m-grid-col-md-2">
                                                <div class="form-label-wrapper">
                                                    <span class="form-label">数据库</span>
                                                </div>
                                            </div>
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-center m-grid-col-md-4">
                                                <input id="dataBaseName"
                                                       th:value="*{dataBaseName}"
                                                       class="easyui-textbox"
                                                       data-options="required:false, tipPosition:'bottom', validType:'length[0,64]'"
                                                       readonly
                                                       style="width:80%">
                                            </div>
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-right m-grid-col-md-2">
                                                <div class="form-label-wrapper">
                                                    <span class="form-label">数据表</span>
                                                </div>
                                            </div>
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-center m-grid-col-md-4">
                                                <input th:id="tableName"
                                                       th:value="*{tableName}"
                                                       class="easyui-textbox"
                                                       data-options="required:false, tipPosition:'bottom', editable:false"
                                                       readonly
                                                       style="width:80%"/>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="m-grid ">
                                        <div class="m-grid-row">
                                            <div class="m-first-col m-grid-col m-grid-col-middle m-grid-col-right m-grid-col-md-2">
                                                <div class="form-label-wrapper">
                                                    <span class="form-label">规则类型</span>
                                                </div>
                                            </div>
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-center m-grid-col-md-4">
                                                <input th:id="ruleType"
                                                       th:value="*{ruleType}"
                                                       class="easyui-textbox"
                                                       data-options="required:false, tipPosition:'bottom', editable:false"
                                                       readonly
                                                       style="width:80%"/>
                                            </div>

                                            <div class="m-grid-col m-grid-col-middle m-grid-col-right m-grid-col-md-2">
                                                <div class="form-label-wrapper">
                                                    <span class="form-label">处理人</span>
                                                </div>
                                            </div>
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-center m-grid-col-md-4">
                                                <input id="handlerName"
                                                       th:value="*{handlerName}"
                                                       class="easyui-textbox"
                                                       data-options="required:false, tipPosition:'bottom', editable:false"
                                                       readonly
                                                       style="width:80%"/>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="m-grid ">
                                        <div class="m-grid-row">
                                            <div class="m-first-col m-grid-col m-grid-col-middle m-grid-col-right m-grid-col-md-2">
                                                <div class="form-label-wrapper">
                                                    <span class="form-label">处理状态</span>
                                                </div>
                                            </div>
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-center m-grid-col-md-4">
                                                <input id="status"
                                                       th:value="*{status}"
                                                       class="easyui-combobox"
                                                       data-options="required:true,valueField:'code',textField:'name',editable:false, data: [{code: 1, name: '未处理'}, {code: 2, name: '处理中'}, {code: 3, name: '已处理'}, {code: 4, name: '已关闭'}, {code: 5, name: '被打回'}], tipPosition:'bottom'"
                                                       readonly
                                                       prompt="请输入处理状态"
                                                       style="width:80%">
                                            </div>
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-right m-grid-col-md-6"></div>
                                        </div>
                                    </div>

                                    <div class="m-grid ">
                                        <div class="m-grid-row">
                                            <div class="m-first-col m-grid-col m-grid-col-middle m-grid-col-right m-grid-col-md-2">
                                                <div class="form-label-wrapper">
                                                    <span class="form-label">问题描述</span>
                                                </div>
                                            </div>
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-left m-grid-col-md-10">

                                            </div>
                                        </div>
                                    </div>
                                    <div class="m-grid ">
                                        <div class="m-grid-row">
                                            <div class="m-first-col m-grid-col m-grid-col-middle m-grid-col-right m-grid-col-md-2">
                                            </div>
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-left m-grid-col-md-8">
                                                <div>
                                                    <table id="detailTable">

                                                    </table>
                                                </div>
                                            </div>
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-right m-grid-col-md-2">

                                            </div>
                                        </div>
                                    </div>

                                    <div class="m-grid ">
                                        <div class="m-grid-row">
                                            <div class="m-first-col m-grid-col m-grid-col-middle m-grid-col-right m-grid-col-md-2">
                                                <div class="form-label-wrapper">
                                                    <span class="form-label">排查原因</span>
                                                </div>
                                                <span class="required">*</span>
                                            </div>
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-center m-grid-col-md-8">
                                                <input id="cause" name="cause"
                                                       th:value="*{cause}"
                                                       class="easyui-textbox"
                                                       data-options="required:true,tipPosition:'bottom',multiline:true,height:100,validType:'length[0,500]'"
                                                       prompt="请输入排查原因，最多500字！"
                                                       th:readonly="${readonly}"
                                                       style="width:90.4%"/>
                                            </div>
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-right m-grid-col-md-2">

                                            </div>
                                        </div>
                                    </div>
                                    <div class="m-grid ">
                                        <div class="m-grid-row">
                                            <div class="m-first-col m-grid-col m-grid-col-middle m-grid-col-right m-grid-col-md-2">
                                                <div class="form-label-wrapper">
                                                    <span class="form-label">处理方案</span>
                                                </div>
                                                <span class="required">*</span>
                                            </div>
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-center m-grid-col-md-8">
                                                <input id="plan" name="plan" th:value="*{plan}"
                                                       class="easyui-textbox"
                                                       data-options="required:true,tipPosition:'bottom',multiline:true,height:100,validType:'length[0,500]'"
                                                       prompt="请输入处理方案，最多500字！"
                                                       th:readonly="${readonly}"
                                                       style="width:90.4%"/>
                                            </div>
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-right m-grid-col-md-2">

                                            </div>
                                        </div>
                                    </div>
                                    <div class="m-grid ">
                                        <div class="m-grid-row">
                                            <div class="m-first-col m-grid-col m-grid-col-middle m-grid-col-right m-grid-col-md-2">
                                                <div class="form-label-wrapper">
                                                    <span class="form-label">建议改进措施</span>
                                                </div>
                                            </div>
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-center m-grid-col-md-8">
                                                <input id="suggestion" name="suggestion" th:value="*{suggestion}"
                                                       class="easyui-textbox"
                                                       data-options="required:false,tipPosition:'bottom',multiline:true,height:100,validType:'length[0,500]'"
                                                       prompt="请输入建议改进措施，最多500字！"
                                                       th:readonly="${readonly}"
                                                       style="width:90.4%"/>
                                            </div>
                                            <div class="m-grid-col m-grid-col-middle m-grid-col-right m-grid-col-md-2">

                                            </div>
                                        </div>
                                    </div>

                                    <div class="m-grid ">
                                        <div class="m-grid-row">
                                            <table id="table2"></table>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-action-panel">
                    <a th:if="${method} eq 'edit'" href="javascript:formDataObj.save();" class="btn blue">提交</a>
                    <a href="javascript:formDataObj.back();" class="btn default">返回</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="scripts">
    <!--/* 加载IE8兼容性脚本 */-->
    <th:block th:replace="common/thinDecorator::IE8FixScripts"/>
    <!--/* 加载核心插件脚本 */-->
    <th:block th:replace="common/thinDecorator::corePluginsScripts"/>
    <!--/* 加载全局主题脚本 */-->
    <th:block th:replace="common/thinDecorator::globalThemeScripts"/>
    <!--/* 加载全局布局脚本 */-->
    <th:block th:replace="common/thinDecorator::globalLayoutScripts"/>
    <th:block th:replace="common/thinDecorator::globalsetupScripts"/>
    <script th:inline="javascript">
        $(function () {
            formDataObj.init()
        });
        let formDataObj = {
            progress: {},//文件上传进度信息
            subMid: {},//子表信息主键值
            editRow: {},//编辑状态的行
            id: -1,//主表主键值
            isSubmit: false,
            init: function () {
                //初始化表单
                this.initForm()
                this.initSubTable()
            },
            //初始化表单
            initForm: function () {
                const $this = this
                const url = "/qa/question/myorder/complete"
                $("#form").form({
                    url: url,
                    onSubmit: function (params) {
                        let boo = $("#form").form("validate")

                        $("input.fileUpload").each(function () {
                            if (!$(this).val()) {
                                boo = false
                                $(this).change()
                                const control = $.data(jq[0], "fileUpload").options.control;
                                control.tooltip("show")
                            }
                        })
                        const subTables = []

                        if (boo) boo = App.getTableDataAndFileData(params, subTables)
                        /*[+ [#th:block th:if="${null != taskId && 0 == nodeType}"]+]*/
                        if (boo) boo = processDefinition.getVaule(params)
                        /*[+ [/th:block] +]*/
                        if (!boo) App.unblockUI()
                        return boo
                    },
                    success: function (result) {
                        App.unblockUI();
                        result = JSON.parse(result)
                        if (result && result.code === 200) {
                            if (result.data) {
                                $this.id = result.data.id
                                $("#form").form("load", result.data)
                            }
                            // formDataObj.initSubs();
                            $(".page-content a.btn.isShow").css("display", "inline-block")
                            toastr["success"]("表单提交成功", "表单提交结果")
                            // 如果是审批中就自动返回
                            if ($this.isSubmit) $this.back()
                            $this.back()
                        } else {
                            toastr["error"](result.msg, "表单提交失败")
                        }
                    },
                    error: function (error) {
                        App.unblockUI()
                        toastr["error"](error, "表单提交失败")
                    }
                });
                this.initData()
            },
            //保存主表数据
            save: function () {
                $.messager.confirm('完成工单提示', '请确认是否完成工单？', function (boo) {
                    if (boo) {
                        App.blockUI({
                            boxed: true,
                            message: "处理中..."
                        })
                        $("#form").form("submit")
                    }
                })
            },
            //保存主表数据并提交申请
            submit: function () {
                this.isSubmit = true
                App.blockUI({
                    boxed: true,
                    message: "处理中..."
                })
                let url = "saveAndApply"
                /*[+ [#th:block th:if="${null != taskId}"]+]*/
                url = "completeTask"
                /*[+ [/th:block] +]*/
                $("#form").form("submit", {
                    url: url
                })
            },
            initData: function () {
                const data = [[${order}]] || {};
                if (data.id) {
                    this.id = data.id
                    $(".page-content a.btn.isShow").css("display", "inline-block")
                }
                //$("#form").form("load", data);
                $("input.fileUpload").each(function () {
                    const name = $(this).attr("name")
                    $(this).fileUpload("setData", data[name])
                })
            },
            //返回台账
            back: function () {
                location.href = [[${backUrl}]] || '/qa/question/order/list'
            },
            edit: function () {
                location.href = '/qa/question/myorder/detail?method=edit&id=' + this.id
            },
            initSubTable: function () {
                let data = [[${orderDetail}]] || {}
                let list = []
                if (data.id) {
                    list.push(data)
                }

                $('#detailTable').datagrid({
                    data: list,
                    width: '90.4%',
                    height: 64,
                    columns: [
                        [
                            {field: 'ruleType', title: '规则类型', width: 150, sortable: false,},
                            {field: 'fieldName', title: '校验字段', width: 150, sortable: false,},
                            {
                                field: 'compareType', title: '校验规则', width: 150, sortable: false,
                                formatter: function (data, row) {
                                    if(data){
                                        return data + '' + row.checkThreshold
                                    } else {
                                        return ''
                                    }
                                }
                            },
                            {field: 'result', title: '实际结果', width: 450, sortable: false,},
                        ]
                    ],
                })
            }
        }
    </script>
</div>
<!-- END CONTAINER -->
</body>

</html>